import React, { useState } from 'react';
import { Card, Form, Input, Button, Upload, message, Typography, Space, Tabs } from 'antd';
import { UploadOutlined, LockOutlined, QrcodeOutlined } from '@ant-design/icons';
import { PacketApi } from "../api/packet-api";

const { Title, Text } = Typography;
const { TabPane } = Tabs;

const Unlock = () => {
  const [cipherForm] = Form.useForm();
  const [qrcodeForm] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('cipher');

  const onCipherFinish = (values) => {
    setLoading(true);
    PacketApi.unpack(values.cipher).then(data => {
      message.success('解锁成功！正在跳转到资源页面...');
      // 跳转到资源页面
    }).finally(() => {
      setLoading(false)
    })
  };

  const onQrcodeFinish = (values) => {
    setLoading(true);
    // 模拟解锁过程
    setTimeout(() => {
      setLoading(false);
      message.success('二维码解锁成功！正在跳转到资源页面...');
      // 实际项目中这里会跳转到资源页面
    }, 1500);
  };

  const beforeUpload = (file) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
      message.error('只能上传图片文件!');
    }
    return isImage;
  };

  return (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      minHeight: '500px',
      padding: '20px'
    }}>
      <Card style={{ 
        width: '100%', 
        maxWidth: '500px',
        backgroundColor: 'rgba(255, 255, 255, 0.05)',
        backdropFilter: 'blur(10px)',
        borderRadius: '10px'
      }} 
      bordered={false}>
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div style={{ textAlign: 'center' }}>
            <LockOutlined style={{ fontSize: '48px', color: '#1890ff' }} />
            <Title level={2} style={{ color: '#fff', marginTop: '16px' }}>
              资源解锁
            </Title>
            <Text style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
              请选择解锁方式并提供相应秘钥来解锁资源
            </Text>
          </div>

          <Tabs 
            defaultActiveKey="cipher" 
            activeKey={activeTab}
            onChange={setActiveTab}
            tabBarStyle={{ color: '#fff' }}
          >
            <TabPane 
              tab={
                <span style={{ color: activeTab === 'cipher' ? '#1890ff' : 'rgba(255, 255, 255, 0.45)' }}>
                  <LockOutlined />
                  秘钥解锁
                </span>
              } 
              key="cipher"
            >
              <Form
                form={cipherForm}
                layout="vertical"
                onFinish={onCipherFinish}
              >
                <Form.Item
                  label={<span style={{ color: '#fff' }}>秘钥</span>}
                  name="cipher"
                  rules={[{ required: true, message: '请输入秘钥!' }]}
                >
                  <Input.Password 
                    placeholder="请输入秘钥" 
                    size="large"
                    style={{ borderRadius: '6px' }}
                  />
                </Form.Item>

                <Form.Item>
                  <Button 
                    type="primary" 
                    htmlType="submit" 
                    loading={loading}
                    size="large"
                    style={{ 
                      width: '100%',
                      borderRadius: '6px',
                      background: 'linear-gradient(45deg, #1890ff, #40a9ff)',
                      border: 'none'
                    }}
                  >
                    解锁资源
                  </Button>
                </Form.Item>
              </Form>
            </TabPane>
            
            <TabPane 
              tab={
                <span style={{ color: activeTab === 'qrcode' ? '#1890ff' : 'rgba(255, 255, 255, 0.45)' }}>
                  <QrcodeOutlined />
                  二维码解锁
                </span>
              } 
              key="qrcode"
            >
              <Form
                form={qrcodeForm}
                layout="vertical"
                onFinish={onQrcodeFinish}
              >
                <Form.Item
                  label={<span style={{ color: '#fff' }}>上传二维码图片</span>}
                  name="qrcode"
                  rules={[{ required: true, message: '请上传二维码图片!' }]}
                >
                  <Upload 
                    beforeUpload={beforeUpload}
                    maxCount={1}
                    accept="image/*"
                  >
                    <Button block
                      icon={<UploadOutlined />} 
                    >
                      点击上传二维码图片
                    </Button>
                  </Upload>
                </Form.Item>

                <Form.Item>
                  <Button 
                    type="primary" 
                    htmlType="submit" 
                    loading={loading}
                    size="large"
                    style={{ 
                      width: '100%',
                      borderRadius: '6px',
                      background: 'linear-gradient(45deg, #1890ff, #40a9ff)',
                      border: 'none'
                    }}
                  >
                    解锁资源
                  </Button>
                </Form.Item>
              </Form>
            </TabPane>
          </Tabs>
        </Space>
      </Card>
    </div>
  );
};

export default Unlock;